<template>
    <!-- 头部部分 -->
    <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="请输入任务名称" autofocus 
        v-model.trim="todoName"
        @keyup.enter="add"
        />
    </header>
</template>

<script>
// 3. 添加功能 
//  3.1 准备一个数据，和输入框input双向绑定，快速获取这个数据
//  3.2 子组件注册键盘keyup事件，回车触发 @keyup.enter
//  3.3 当点击回车的时候，触发一个add事件，通知父组件添加一条数据
        // this.$emit('事件名', 参数)
//  3.4 从父组件App.vue中操作新增数据
export default {
    data(){
        return {
            todoName:''
        }
    },
    methods:{
        add(){
            this.$emit('add', this.todoName)
            this.todoName = ''
        }
    }
}
</script>

<style>

</style>